<template>
    
    <div class="tab-control">
        <div class="tab-control-item"
             v-for="(item, index) in titles"
             :key="index"
             @click="itemClick(index)"
             :class="{active:index == currentIndex}">
            <span>{{item}}</span>
        </div>
    </div>
    
</template>

<script>

import {ref} from 'vue'

export default {
    name: "TabControl",
    props: {
        titles: {
            type: Array,
            default() {
                return [];
            }
        }
    },
    setup(props, {emit}) {
        let currentIndex = ref(0);
        
        let itemClick = (index) => {
            currentIndex.value = index;
            emit('tabClick', index)
        }
        
        return {
            currentIndex,
            itemClick,
        }
        
    }
}
</script>

<style scoped lang="scss">

.tab-control {
    display: flex;
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: var(--font-size);
    background-color: #fff;
    
    // css3新特性，固定在44像素
    position: sticky;
    top: 44px;
    z-index: 9;
    
}

.tab-control-item {
    flex: 1;
    span {
        padding: 6px;
    }
}

.active {
    //浅一点
    color: var(--color-tint);
    span {
        // 深一点
        border-bottom: 2px solid var(--color-high-text);
    }
}

</style>